<template>
  <div>
    <input type="text" v-model="name">
    <button @click="initWebSocket">连接</button>
    <input type="text" v-model="sendName">
    <input type="text" v-model="text">
    <button @click="sendMessage">发送消息</button>
    <div class="bubble">
    </div>
    <div>
      <div v-for="(data,key) in datas" :key="key">
        {{data}}
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'ChatRoom',
  data () {
    return {
      sendName:'',
      name:'',
      text: '',
      datas: [],
      stompClient: null
    }
  },
  mounted () {
    if ('WebSocket' in window) {
      // this.initWebSocket()
    } else {
      alert('当前浏览器 Not support websocket')
    }
  },
  methods: {
    //发送消息
    sendMessage () {
      let msg={
        "name":this.sendName,
        "msg":this.text
      }
      Tom.webSocket.sendMessage('/app/receive',msg);
    },
    initWebSocket () {
      this.connection()
    },
    connection () {
      let that = this;
      Tom.webSocket.connection('/chat','/user/queue/getResponse',this.name,function(data){
          console.log(data,11111111111)
         that.datas.push(data);
      });
    }
  }
}
</script>

<style scoped>
</style>